<template>
   <view class="buy-container">
    <!-- 商品图片轮播 -->
    <swiper class="swiper" indicator-dots autoplay circular 
      indicator-color="rgba(255,255,255,0.4)" 
      indicator-active-color="#ffffff">
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <image :src="item" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <!-- 商品基本信息 -->
    <view class="goods-info">
      <view class="price-section">
        <view class="current-price">¥{{goodsInfo.price}}</view>
        <view class="original-price">¥{{goodsInfo.originalPrice}}</view>
      </view>
      <view class="title">{{goodsInfo.title}}</view>
    </view>

    <!-- 卖家信息 -->
    <view class="seller-info">
      <view class="seller-header">
        <image class="seller-avatar" :src="sellerInfo.avatar" mode="aspectFill"></image>
        <view class="seller-detail">
          <view class="seller-name">{{sellerInfo.name}}</view>
          <view class="seller-level">
            <text class="level-icon">★</text>
            {{sellerInfo.level}}
          </view>
        </view>
        <view class="enter-shop" @click="goToShop">进入店铺</view>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="goods-detail">
      <view class="detail-title">
        <text class="title-text">商品详情</text>
      </view>
      <view class="detail-content">
        <rich-text :nodes="goodsInfo.detail"></rich-text>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="footer">
      <view class="buy-buttons">
        <!-- <button class="share-btn" @click="shareGoods">分享给好友</button> -->
        <button class="buy-now" @click="showBuyPopup">立即购买</button>
        <!-- <login-reminder ref="loginReminder" /> -->
      </view>
    </view>

    <!-- 购买弹窗 -->
    <view class="buy-popup" v-if="showPopup">
      <view class="popup-mask" @click="closePopup"></view>
      <view class="popup-content">
        <!-- 商品信息 -->
        <view class="popup-goods-info">
          <image class="popup-goods-image" :src="swiperList[0]" mode="aspectFill"></image>
          <view class="popup-goods-detail">
            <view class="popup-goods-price">¥{{goodsInfo.price}}</view>
            <view class="popup-goods-title">{{goodsInfo.title}}</view>
          </view>
        </view>

        <!-- 购买数量 -->
        <view class="popup-section">
          <view class="quantity-selector">
            <view class="quantity-left">
              <view class="section-title">购买数量</view>
            </view>
            <view class="quantity-right">
              <view class="quantity-btn" @click="decreaseQuantity">-</view>
              <input type="number" v-model="quantity" class="quantity-input" />
              <view class="quantity-btn" @click="increaseQuantity">+</view>
            </view>
          </view>
        </view>

        <!-- 收货地址 -->
        <view class="popup-section">
          <view class="section-title">收货地址</view>
          <view class="address-selector" @click="showAddressPicker">
            <text v-if="selectedAddress.province">{{selectedAddress.province}} {{selectedAddress.city}} {{selectedAddress.district}}</text>
            <text v-else class="placeholder">请选择省市区</text>
            <text class="arrow">></text>
          </view>
          <view class="detail-address">
            <input 
              type="text" 
              v-model="detailAddress" 
              placeholder="请输入详细地址（如街道、门牌号等）" 
              class="detail-address-input"
            />
          </view>
        </view>

        <!-- 备注 -->
        <view class="popup-section">
          <view class="section-title">备注</view>
          <input type="text" v-model="remark" placeholder="请输入备注信息" class="remark-input" />
        </view>

        <!-- 总金额 -->
        <view class="popup-total">
          <text>总计：</text>
          <text class="total-price">¥{{totalPrice}}</text>
        </view>

        <!-- 支付按钮 -->
        <view class="popup-footer">
          <button class="pay-btn" @click="confirmPay">立即支付</button>
        </view>
      </view>
    </view>

    <!-- 地址选择器 -->
    <address-picker 
      v-if="showAddressPickerFlag"
      @close="closeAddressPicker"
      @confirm="onAddressConfirm"
    />
   </view>
</template>

<script>
import { ref, computed } from 'vue'
import AddressPicker from '@/components/address-picker/address-picker.vue'

export default {
    components: {
        AddressPicker
    },
    setup () {
        const swiperList = [
            '/static/lunbotu/1.jpg',
            '/static/lunbotu/2.jpg',
            '/static/lunbotu/3.jpg'
        ]

        const goodsInfo = {
            price: 199.00,
            originalPrice: 299.00,
            title: '商品标题',
            detail: '<div>这里是商品详细描述，可以包含图片、文字等富文本内容</div>'
        }

        const sellerInfo = {
            avatar: '/static/avatar/default.png',
            name: '卖家昵称',
            level: '钻石店铺',
            shopId: '123456'
        }

        const goToShop = () => {
            uni.navigateTo({
                url: '/pages/index/stores'
            })
        }

        const shareGoods = () => {
            uni.showShareMenu({
                withShareTicket: true,
                menus: ['shareAppMessage', 'shareTimeline']
            })
        }

        const showPopup = ref(false)
        const quantity = ref(1)
        const showAddressPickerFlag = ref(false)
        const selectedAddress = ref({
            province: '',
            city: '',
            district: ''
        })
        const remark = ref('')
        const detailAddress = ref('')

        const showBuyPopup = () => {
            showPopup.value = true
        }

        const closePopup = () => {
            showPopup.value = false
        }

        const decreaseQuantity = () => {
            if (quantity.value > 1) {
                quantity.value--
            }
        }

        const increaseQuantity = () => {
            quantity.value++
        }

        const showAddressPicker = () => {
            showAddressPickerFlag.value = true
        }

        const closeAddressPicker = () => {
            showAddressPickerFlag.value = false
        }

        const onAddressConfirm = (address) => {
            selectedAddress.value = address
            showAddressPickerFlag.value = false
        }

        const totalPrice = computed(() => {
            return (goodsInfo.price * quantity.value).toFixed(2)
        })

        const confirmPay = () => {
            if (!selectedAddress.value.province || !selectedAddress.value.city || !selectedAddress.value.district) {
                uni.showToast({
                    title: '请选择收货地址',
                    icon: 'none'
                })
                return
            }
            if (!detailAddress.value) {
                uni.showToast({
                    title: '请输入详细地址',
                    icon: 'none'
                })
                return
            }
            uni.showLoading({
                title: '支付中...'
            })
            setTimeout(() => {
                uni.hideLoading()
                showPopup.value = false
                uni.showToast({
                    title: '支付成功',
                    icon: 'success'
                })
            }, 1500)
        }

        return {
            swiperList,
            goodsInfo,
            sellerInfo,
            goToShop,
            shareGoods,
            showPopup,
            quantity,
            showAddressPickerFlag,
            selectedAddress,
            remark,
            showBuyPopup,
            closePopup,
            decreaseQuantity,
            increaseQuantity,
            showAddressPicker,
            closeAddressPicker,
            onAddressConfirm,
            totalPrice,
            detailAddress,
            confirmPay
        }
    }
}
</script>

<style lang="scss" scoped>
.buy-container {
    min-height: 100vh;
    background: linear-gradient(to bottom, #f8f9fa, #f1f3f5);
    padding-bottom: 120rpx;
}

.swiper {
    width: 100%;
    height: 750rpx;
    position: relative;
    
    &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 120rpx;
        background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
        pointer-events: none;
    }
    
    image {
        width: 100%;
        height: 100%;
    }
}

.goods-info {
    margin: -40rpx 30rpx 30rpx;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 40rpx;
    border-radius: 30rpx;
    box-shadow: 0 8rpx 30rpx rgba(0,0,0,0.08);
    position: relative;
    z-index: 1;

    .price-section {
        display: flex;
        align-items: baseline;
        margin-bottom: 30rpx;

        .current-price {
            font-size: 64rpx;
            background: linear-gradient(45deg, #ff4d4f, #ff7875);
            -webkit-background-clip: text;
            color: transparent;
            font-weight: 800;
            letter-spacing: -2rpx;
        }

        .original-price {
            font-size: 28rpx;
            color: #999;
            text-decoration: line-through;
            margin-left: 20rpx;
            opacity: 0.8;
        }
    }

    .title {
        font-size: 36rpx;
        font-weight: 600;
        line-height: 1.4;
        color: #333;
        position: relative;
        padding-left: 24rpx;
        
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8rpx;
            bottom: 8rpx;
            width: 8rpx;
            background: linear-gradient(to bottom, #ff4d4f, #ff7875);
            border-radius: 4rpx;
        }
    }
}

.seller-info {
    background-color: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);

    .seller-header {
        display: flex;
        align-items: center;

        .seller-avatar {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            margin-right: 20rpx;
            border: 4rpx solid #fff;
            box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
        }

        .seller-detail {
            flex: 1;

            .seller-name {
                font-size: 32rpx;
                font-weight: bold;
                margin-bottom: 10rpx;
                color: #333;
            }

            .seller-level {
                font-size: 24rpx;
                color: #666;
                
                .level-icon {
                    color: #ffd700;
                    margin-right: 8rpx;
                }
            }
        }

        .enter-shop {
            padding: 12rpx 30rpx;
            background: linear-gradient(45deg, #ff4d4f, #ff7875);
            border-radius: 30rpx;
            font-size: 24rpx;
            color: #fff;
            box-shadow: 0 4rpx 12rpx rgba(255,77,79,0.3);
        }
    }
}

.goods-detail {
    margin: 0 30rpx;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 30rpx;
    padding: 40rpx;
    box-shadow: 0 8rpx 30rpx rgba(0,0,0,0.08);

    .detail-title {
        margin-bottom: 30rpx;
        position: relative;
        display: flex;
        align-items: center;
        
        .title-text {
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
            position: relative;
            padding-right: 30rpx;
            
            &::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: -10rpx;
                width: 40rpx;
                height: 4rpx;
                background: linear-gradient(45deg, #ff4d4f, #ff7875);
                border-radius: 2rpx;
            }
        }
    }

    .detail-content {
        font-size: 28rpx;
        color: #666;
        line-height: 1.8;
    }
}

.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 -8rpx 30rpx rgba(0,0,0,0.08);

    .buy-buttons {
        display: flex;
        justify-content: center;

        .buy-now {
            width: 90%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            font-size: 32rpx;
            font-weight: 600;
            color: #fff;
            background: linear-gradient(45deg, #ff4d4f, #ff7875);
            border-radius: 44rpx;
            box-shadow: 0 8rpx 20rpx rgba(255,77,79,0.3);
            transition: all 0.3s ease;
            
            &:active {
                transform: translateY(2rpx);
                box-shadow: 0 4rpx 10rpx rgba(255,77,79,0.2);
            }
        }
    }
}

.buy-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

.popup-content {
    position: relative;
    width: 100%;
    background-color: #fff;
    border-radius: 30rpx 30rpx 0 0;
    padding: 30rpx;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4rpx 30rpx rgba(0, 0, 0, 0.1);
}

.popup-goods-info {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
    margin-bottom: 20rpx;

    .popup-goods-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 16rpx;
        margin-right: 20rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    }

    .popup-goods-detail {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10rpx 0;
    }

    .popup-goods-price {
        font-size: 40rpx;
        color: #ff4d4f;
        font-weight: bold;
        background: linear-gradient(45deg, #ff4d4f, #ff7875);
        -webkit-background-clip: text;
        color: transparent;
    }

    .popup-goods-title {
        font-size: 28rpx;
        color: #333;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}

.popup-section {
    padding: 30rpx 0;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

    .section-title {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
        font-weight: 500;
    }

    .quantity-selector {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .quantity-left {
            display: flex;
            align-items: center;
            
            .section-title {
                margin-bottom: 0;
                margin-right: 20rpx;
            }
        }

        .quantity-right {
            display: flex;
            align-items: center;

            .quantity-btn {
                width: 60rpx;
                height: 60rpx;
                line-height: 60rpx;
                text-align: center;
                border: 1rpx solid #eee;
                font-size: 32rpx;
                color: #666;
                background-color: #f8f8f8;
                border-radius: 8rpx;
                transition: all 0.2s ease;

                &:active {
                    background-color: #f0f0f0;
                    transform: scale(0.95);
                }
            }

            .quantity-input {
                width: 80rpx;
                height: 60rpx;
                text-align: center;
                border: 1rpx solid #eee;
                margin: 0 20rpx;
                font-size: 28rpx;
                background-color: #f8f8f8;
                border-radius: 8rpx;
            }
        }
    }

    .address-selector {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        font-size: 28rpx;
        color: #333;
        background-color: #f8f8f8;
        border-radius: 8rpx;
        margin-top: 10rpx;

        .placeholder {
            color: #999;
        }

        .arrow {
            color: #999;
            font-size: 24rpx;
            margin-left: 10rpx;
        }
    }

    .remark-input {
        width: 100%;
        height: 80rpx;
        padding: 0 20rpx;
        background-color: #f8f8f8;
        border-radius: 8rpx;
        font-size: 28rpx;
        border: 1rpx solid #eee;
        transition: all 0.2s ease;
        box-sizing: border-box;

        &:focus {
            border-color: #ff4d4f;
            background-color: #fff;
        }
    }
}

.popup-total {
    padding: 30rpx 0;
    text-align: right;
    font-size: 28rpx;
    color: #666;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;

    .total-price {
        font-size: 40rpx;
        color: #ff4d4f;
        font-weight: bold;
        margin-left: 10rpx;
        background: linear-gradient(45deg, #ff4d4f, #ff7875);
        -webkit-background-clip: text;
        color: transparent;
    }
}

.popup-footer {
    padding: 20rpx 0;
    margin-top: 20rpx;

    .pay-btn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        background: linear-gradient(45deg, #ff4d4f, #ff7875);
        color: #fff;
        font-size: 32rpx;
        font-weight: 600;
        border-radius: 44rpx;
        box-shadow: 0 8rpx 20rpx rgba(255,77,79,0.3);
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }

        &:active {
            transform: translateY(2rpx);
            box-shadow: 0 4rpx 10rpx rgba(255,77,79,0.2);

            &::after {
                transform: translateX(100%);
            }
        }
    }
}

.detail-address {
    margin-top: 20rpx;
    
    .detail-address-input {
        width: 100%;
        height: 80rpx;
        padding: 0 20rpx;
        background-color: #f8f8f8;
        border-radius: 8rpx;
        font-size: 28rpx;
        border: 1rpx solid #eee;
        transition: all 0.2s ease;
        box-sizing: border-box;

        &:focus {
            border-color: #ff4d4f;
            background-color: #fff;
        }
    }
}

// 添加弹窗动画
.buy-popup-enter-active,
.buy-popup-leave-active {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.buy-popup-enter-from,
.buy-popup-leave-to {
    opacity: 0;
    transform: translateY(100%);
}

.buy-popup-enter-to,
.buy-popup-leave-from {
    opacity: 1;
    transform: translateY(0);
}
</style>